import React from 'react'


export default (props) => {
    let {list,carts}=props
    // 【功能】:格式化时间
    function formatTime(val) {
            //计算的是当前时间与最后回复的时间差
            let stamp = Date.now() - Date.parse(val)
            //时间是四舍五入
            let h = stamp / (1000 * 60 * 60)
            // console.log(h);
            h = (h >= 24
                ? ((h / 24) >= 30 ? Math.floor((h / 24 / 30)) + '月前' : Math.floor((h / 24)) + '天前')
                : (h >= 1) ? Math.floor(h) + '小时前' : (h * 60) >= 1 ? Math.floor(h * 60) + '分钟前' : Math.floor(h * 60 * 60) + '秒前')
            return h
    }
    //【功能】:通过枚举的方式赋值给新的list，新的list上面就会有对应的中文label,然后用新的list来渲染视图
    function newLists(){
            list.map((ele1,index)=>{
                var res = carts.find((ele2)=>{
                    //找出都有相同的tab，然后通过返回Boolean值，来决定对应的值
                        // console.log(ele1.tab === ele2.tab);
                   return  ele1.tab===ele2.tab
                })
                // console.log(res);
                list[index].label = (res?res.label:'')
            })
            return list
    }

    return (
        <div className='article-list'>
                {
                newLists().map(ele=>(
                        <div className='article' key={ele.id}>
                            <img 
                            src={ele.author && ele.author.avatar_url}
                                title={ele.author&&ele.author.loginname}
                            />
                                <div className='num'>
                                <span>{ele.reply_count}</span>
                                    <span>/</span>
                                <span>{ele.visit_count}</span>
                                </div>
                                {ele.top&&<span className='label on'>置顶</span>}
                                {
                                    !ele.top && ele.label&&<span className='label'>{ele.label}</span>
                                }
                            <span className='title'>{ele.title}</span>
                            <span className='time'>{formatTime(ele.last_reply_at)}</span>
                            </div>
                        ))
                }
        </div>
    )
}